<template>
	<view class="flex flex-col h-full">
		<scroll-view scroll-y="true" class="flex-1">
			<view class="" v-if="step == 1">
				<view class="mb-20">
					<text class="text-sm font-bold">您的具体问题是:</text>
					<uni-easyinput class="mt-20" type="textarea" autoHeight v-model="formData.problem"
						placeholder="我最近总是觉得做什么都没干劲总觉得自己很无能，想知道自己是不是抑郁了."></uni-easyinput>
				</view>
				<view class="mb-20">
					<text class="text-sm font-bold">支付类型</text>
					<view class="flex items-center pt-20 pb-20">
						<radioCompVue v-model="postFrom.paysts" :item="item" v-for="(item, idx) in payList" :key="idx">
						</radioCompVue>
					</view>
				</view>
				<view class="mb-20">
					<view class="pb-20" v-if="postFrom.paysts == 0">
						<view class="flex flex-col mb-20" v-for="(item, idx) in blueDiamondList" :key="idx">
							<radioCompVue v-model="postFrom.sinpay" :edit="true" :item="item" :type="postFrom.paysts">
							</radioCompVue>
							<text class="text-[#666666] text-xs p-20 bg-[#F0F3F4] rounded-md mt-20">{{item.desc}}</text>
						</view>
					</view>
					<view class="pb-20" v-else>
						<view class="flex flex-col mb-20" v-for="(item, idx) in redDiamondList" :key="idx">
							<radioCompVue v-model="postFrom.sinpay" :edit="true" :item="item" :type="postFrom.paysts">
							</radioCompVue>
							<text class="text-[#666666] text-xs p-20 bg-[#F0F3F4] rounded-md mt-20">{{item.desc}}</text>
						</view>
					</view>
				</view>
				<view class="mb-20">
					<text class="text-sm font-bold">补充说明:</text>
					<uni-easyinput class="mt-20" v-model="formData.replenishment"
						placeholder="总是听到一些奇怪的声音。"></uni-easyinput>
				</view>
				<view class="mb-20">
					<text class="text-sm font-bold">例如:</text>
					<view class="bg-[#F0F3F4] p-20 text-[#666666] mt-20">总是听到一些奇怪的声音。</view>
				</view>
			</view>
			<view class="" v-if="step == 2">
				<sendSettingVue :isCard="true"></sendSettingVue>
			</view>
			<view class="" v-if="step == 3">
				<payCompVue @send="handleSend"></payCompVue>
			</view>
		</scroll-view>
		<view class="pt-30" v-if="step!==3">
			<button type="primary" class="rounded-full" @click="onSave">确定</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		watch,
		computed
	} from 'vue';
	import radioCompVue from './radioComp.vue';
	import sendSettingVue from './sendSetting.vue';
	import payCompVue from './payComp.vue';

	const pretList = inject('pretList')
	const systemSetting = inject('systemSetting')
	const postFrom = inject('postFrom')
	const step = inject('step')
	const pickerRef = inject('pickerRef')
	const deckId = inject('deckId')

	const emit = defineEmits(['update', 'send'])

	const payList = [{
		text: "蓝钻",
		value: 0
	}, {
		text: "红钻",
		value: 1
	}]
	// watch(() => postFrom.value, () => {
	// 	console.log(postFrom.value)
	// }, {deep: true, immediate: true})

	const payPrice = computed(() => {
		if (postFrom.value.sec == 1) {
			return postFrom.value.sinpay * postFrom.value.pret * 1 + 12
		} else {
			return postFrom.value.sinpay * postFrom.value.pret * 1
		}
	})

	const addparme = ref([]) // 不适感
	const formData = ref({
		problem: '',
		replenishment: '',
	})
	const isCard = ref(false) // 是否为卡牌区

	const blueDiamondList = ref([]) // 蓝钻价格列表
	const redDiamondList = ref([]) // 红钻价格列表

	const getBlueList = () => {
		let arr = [];
		systemSetting.value.map(item => {
			if (item.name == 'CardBlue01') {
				const obj = {
					needIcon: true,
					type: 1,
					num: item.kbidc,
					editPrice: null,
					desc: '您可以在手机上直接选择三张牌，组成通用牌阵，方便快捷，具有很强的泛用性，可能是得到解读条数最多的方式。'
				}
				arr.push(obj)
			}
			if (item.name == 'CardBlue02') {
				const obj = {
					needIcon: true,
					type: 2,
					num: item.kbidc,
					editPrice: null,
					minv: item.minv,
					maxv: item.maxv,
					addv: item.addv,
					desc: `您需要在1-78的数字中选择${item.addv}个，由卡牌师，出具实物卡牌针对您的问题进行定向性解读，具体用牌数在${item.minv}-${item.maxv}张之间。`
				}
				arr.push(obj)
			}
			if (item.name == 'CardBlue03') {
				const obj = {
					needIcon: true,
					type: 3,
					num: item.kbidc,
					editPrice: null,
					minv: item.minv,
					maxv: item.maxv,
					addv: item.addv,
					desc: `您需要在1-78的数字中选择${item.addv}个，由资深专家，出具实物卡牌针对您的问题进行详细解读，具体用牌数在${item.minv}-${item.maxv}张之间组合牌阵有时会出现用多套牌的情况。`
				}
				arr.push(obj)
			}
		})
		blueDiamondList.value = arr
	}
	const getRedList = () => {
		let arr = [];
		systemSetting.value.map(item => {
			if (item.name == 'CardRed01') {
				const obj = {
					needIcon: true,
					type: 1,
					num: item.kbidc,
					editPrice: null,
					desc: '您可以在手机上直接选择三张牌，组成通用牌阵，方便快捷，具有很强的泛用性，可能是得到解读条数最多的方式。'
				}
				arr.push(obj)
			}
			if (item.name == 'CardRed02') {
				const obj = {
					needIcon: true,
					type: 2,
					num: item.kbidc,
					editPrice: null,
					minv: item.minv,
					maxv: item.maxv,
					addv: item.addv,
					desc: `您需要在1-78的数字中选择${item.addv}个，由卡牌师，出具实物卡牌针对您的问题进行定向性解读，具体用牌数在${item.minv}-${item.maxv}张之间。`
				}
				arr.push(obj)
			}
			if (item.name == 'CardRed03') {
				const obj = {
					needIcon: true,
					type: 3,
					num: item.kbidc,
					editPrice: null,
					minv: item.minv,
					maxv: item.maxv,
					addv: item.addv,
					desc: `您需要在1-78的数字中选择${item.addv}个，由资深专家，出具实物卡牌针对您的问题进行详细解读，具体用牌数在${item.minv}-${item.maxv}张之间组合牌阵有时会出现用多套牌的情况。`
				}
				arr.push(obj)
			}
		})
		redDiamondList.value = arr
	}
	getBlueList();
	getRedList();

	const handleSend = () => {
		console.log('handleSend')
		emit('send')
	}

	const onSave = () => {
		if (postFrom.value.sinpay == "") {
			uni.showToast({
				icon: "none",
				title: "请选择一种解读模式！"
			})
			return
		}
		let priceObj = {};
		if (postFrom.value.paysts == 0) {
			const arr = []
			blueDiamondList.value.map(item => {
				if (item.num == postFrom.value.sinpay || item.editPrice == postFrom.value.sinpay) {
					arr.push(item)
				}
			});
			priceObj = arr[0]
		} else {
			const arr = []
			redDiamondList.value.map(item => {
				if (item.num == postFrom.value.sinpay || item.editPrice == postFrom.value.sinpay) {
					arr.push(item)
				}
			});
			priceObj = arr[0]
		}
		const obj = {
			describe: formData.value.problem,
			replenishment: formData.value.replenishment,
		}
		if (priceObj.type == 1) {
			obj.sdes = 1
		} else {
			obj.sdes = 0
		}
		// console.log(priceObj)
		console.log(step.value)
		if (step.value == 1) {
			if (!formData.value.problem) {
				uni.showToast({
					icon: "none",
					title: "请填写您的问题！"
				})
				return
			}
			if (priceObj.type != 1) {
				uni.$on('chooseNum', (arr) => {
					console.log(arr)
					obj.selcard = arr.join(',')
					emit("update", obj)
				})
				uni.navigateTo({
					url: `/pages/views/chooseNum?num=${priceObj.addv}`
				})
			} else {
				pickerRef.value.show()
				console.log(pickerRef.value)
				emit("update", obj)
			}
		} else if (step.value == 2) {
			postFrom.value.pret = 1
			// if (postFrom.value.pret == 0) {
			// 	uni.showToast({
			// 		icon: "none",
			// 		title: "请选择解读人数！"
			// 	})
			// 	return
			// }
			emit("update", obj)
		} else {
			emit("update", obj)
		}
	}
</script>

<style lang="scss" scoped>
	:deep(.uni-easyinput__content) {
		background-color: #F0F3F4 !important;
		border-radius: 10rpx !important;
	}

	.box-custom {
		:deep(.uni-easyinput__content) {
			width: 180rpx;
			border-radius: 10rpx !important;
		}
	}
</style>